<template>
  <div class="login-container" :class="{ light: light }" id="app">
    <span class="switch-box" :class="{ light: light }"> <BaseSwitch v-model="light" />{{ light ? '关灯' : '开灯' }}: </span>
    <BaseBox style="width: 400px; background: #f0f2f5">
      <template #title>
        <BaseTabs :tabs="list" v-model="active"></BaseTabs>
      </template>
      <!-- 替换后的代码 -->
      <keep-alive>
        <component :is="active" />
      </keep-alive>
      <!-- 原始代码 -->
    </BaseBox>
  </div>
</template>

<script>
import LoginBox from './LoginBox.vue'
import MobileBox from './MobileBox.vue'
export default {
  name: 'LoginView',
  data() {
    return {
      light: true,
      active: 'LoginBox',
      list: [
        {
          value: 'LoginBox',
          text: '密码登录',
        },
        {
          value: 'MobileBox',
          text: '手机号注册',
        },
      ],
    }
  },
  components: {
    LoginBox,
    MobileBox,
  },
}
</script>

<style lang="less" scoped>
.login-container {
  height: 100vh;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: #656364;
  transition: 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  &.light {
    background-color: #fff;
  }
  .switch-box {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    &.light {
      color: #656364;
    }
  }
}
</style>
